<!-- 文章列表 articleList -->
<template>
	<div class="backwarp">
		<el-container>
			<el-header><Header></Header></el-header>
			<el-container style="padding: 60px 0;">
				<el-aside width="240px" style="padding-bottom: 120px;"><BackNavList></BackNavList></el-aside>
				<el-main>
					<div class="elMain">
						<div class="topCont"><span>{{topTitle}}</span></div>
						<div class="sheetCard">
							<el-form :model="tableData" :rules="rules" ref="tableData" label-width="100px"
								class="demoRuleForm">
								<el-form-item label="文章标题" prop="name">
									<el-input v-model="tableData.name"></el-input>
								</el-form-item>
								<el-form-item label="日期时间" prop="date">
									<el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" v-model="tableData.date" style="width:100%;" :default-time="defaulTime" ></el-date-picker>
								</el-form-item>
								<el-form-item label="文章作者">
									<el-input v-model="tableData.author"></el-input>
								</el-form-item>
								<el-form-item label="封面地址" prop="coverImg">
									<el-input v-model="tableData.cover"></el-input>
								</el-form-item>
								<el-form-item label="文章封面">
									<template>
										<img v-if="tableData.cover!==''" :src="tableData.cover" >
										<img v-else src="https://wei-1302490281.cos.ap-chengdu.myqcloud.com/blogCover/backBanner.png" >
									</template>
								</el-form-item>
								<el-form-item label="文章标签" prop="tags">
									<el-input v-model="tableData.tags"></el-input>
								</el-form-item>
								<el-form-item label="文章分类" prop="classify">
									<el-input v-model="tableData.classify"></el-input>
								</el-form-item>
								<el-form-item label="文章出处">
									<el-input v-model="tableData.article"></el-input>
								</el-form-item>
								<el-form-item label="本文链接">
									<el-input v-model="tableData.link"></el-input>
								</el-form-item>
								<el-form-item label="文章描述">
									<el-input type="textarea" v-model="tableData.excerpt"></el-input>
								</el-form-item>
								<el-form-item label="正文内容">
									<Editor2 class="editorBox" v-bind:content="tableData.content" @markdown1="markdown1" @markdown2="markdown2"></Editor2>
								</el-form-item>
								<el-form-item style="margin-bottom:0;margin-top:50px;">
									<el-button type="primary" @click="submitForm('tableData')">立即创建</el-button>
									<el-button @click="resetForm('tableData')">重置</el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</el-main>
			</el-container>
			<el-footer><a href="https://beian.miit.gov.cn">陇ICP备2021000907号-2</a></el-footer>
		</el-container>
	</div>
</template>

<script>
	import Header from '../../components/back/header.vue'
	import BackNavList from '../../components/back/backNavList.vue'
	import Editor2 from '../../components/back/editor2.vue'
	export default {
		name: 'addArticle',
		data() {
			return {
				Id: '',
				topTitle: '新增文章',
				defaulTime:'',	// 当前时间
				tableData: {
					Id: '',
					name: "",
					datetime: "",
					author: "肥菇凉",
					cover: "",
					tags: "",
					classify: "",
					article: "",
					excerpt: "",
					link: "",	// 本文链接
					content: "",
				},
				rules: {
					name: [{ required: true, message: '请输入文章名称', trigger: 'blur'},],
					date: [{ required: true, message: '请选择日期时间', trigger: 'blur'}],
					coverImg: [{ required: true, message: '请输入封面地址', trigger: 'blur'}],
					tags: [{ required: true, message: '请输入文章标签', trigger: 'blur'}],
					classify: [{ required: true, message: '请输入文章分类', trigger: 'blur'}],
				}
			}
		},
		mounted() {
			if (this.$route.query.Id !== undefined) {
				this.topTitle = '编辑文章 ==> Id: ' + this.$route.query.Id;
				this.tableData.Id = this.$route.query.Id;
				this.getDataList(this.$route.query.Id)
			} else {
				this.topTitle = '新增文章';
			}
			// 获取当前时间
			let hh = new Date().getHours();
			let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
			let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
			this.defaulTime = hh+':'+mf+':'+ss;
			this.$notify({
				title: '重要通知：本页面富文本编辑器不支持图片上传！！！',
				duration: 3000,type: 'error'
			});
		},
		methods: {
			getDataList(e) { // 数据请求
				this.$axios.post(this.HOST + '/api/indexArticle', {
					id: e
				}).then(res => {
					this.tableData = res.data.data[0];
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
			markdown1(e){this.tableData.content = e;},
			markdown2(e){this.tableData.content = e;},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios.post(this.HOST + '/api/addReviseArticle', {
							Id: this.tableData.Id,
							name: this.tableData.name,
							datetime: this.tableData.datetime,
							author: this.tableData.author,
							cover: this.tableData.cover,
							tags: this.tableData.tags,
							classify: this.tableData.classify,
							article: this.tableData.article,
							excerpt: this.tableData.excerpt,
							link: this.tableData.link,
							content: this.tableData.content
						}).then(res => {
							console.log(res.data.data)
							if(res.data.data == ""){
								this.$message.error('提交失败');
							}else{
								this.$message({message: '修改成功',type: 'success'});
								this.tableData.name='';this.tableData.datetime='';this.tableData.cover='';
								this.tableData.tags='';this.tableData.classify='';this.tableData.article='';
								this.tableData.excerpt='';this.tableData.link='';this.tableData.content='';
								this.tableData.author="肥菇凉";
							}
						}).catch(err => {
							console.log(err, ' catch ')
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.tableData.author = '';
				this.tableData.excerpt = '';
				this.tableData.content = '';
			},
		},
		components: {
			Header: Header,
			BackNavList: BackNavList,
			Editor2: Editor2,
		}
	}
</script>

<style>
	@import url("../../assets/css/backStyle.css");
	.backwarp .el-header {padding: 0;position: fixed;width: 100%;z-index: 9999;}
	.demoRuleForm{padding: 20px 20px 20px 60px;}
	.demoRuleForm .el-form-item__content {width: 420px;}
	.editorBox{width:880px;}
</style>




